昨天我們已經將製作好的版型，套用到 Angular 的根元件 AppComponent，今天，我們就要來進行發行與部署 Angular 應用程式的流程。

首先，打開終端機面板，輸入 ng build，在建置專案的過程中，一樣會去呼叫 Webpack，Webpack 則會對所有的 TypeScript 進行編譯，並把結果打包成數支 JavaScript 檔案。

花了一段時間後，建置完成，並出現以下的畫面。

此時，在側邊檔案總管的面板，也會出現 dist/angular-demo 資料夾。

根據 Angular 官方文件的描述，ng build 執行完成後，預設路徑會是 dist/project-name，也就是我們在上圖中看到的 dist/angular-demo。

而 dist/angular-demo 資料夾裡的檔案，就是將來我們要複製到網站伺服器的檔案，然後這裡有一件事情可以補充說明，Angular 是個純前端的應用程式，因此只會有前端的 Code，也就是說，只有 HTML、CSS 及 JavaScript，頂多就是還包含了一些如：圖片、字型檔…這類的靜態檔案，這部分在 dist/angular-demo 資料夾也可以得到驗證。

因此，只要把 dist/angular-demo 資料夾，複製到任何一個網站伺服器，就可以直接執行，再者，Angular 是一個 JavaScript 的框架，所以所有的程式碼，只會在瀏覽器中執行。

接下來，我們來檢視 dist/angular-demo 資料夾中的 index.html 檔案，可以發現跟我們前一天複製的內容差不多。

唯一的差異是，在 body 結尾標籤前，引入了數支 JavaScript 檔案，這是我們剛才使用指令 ng build 執行完成後，幫我們自動插入的。

這裡可使用快捷鍵 f1 來開啟命令列面版，並輸入 wrap 可選擇切換自動換行，來完整顯示程式碼。

回到檔案總管的 dist/angular-demo 資料夾，可以看到一支我們不需要的檔案 drama-blog.html，理由是我們已經將這個檔案的內容，套用到 Angular 的根元件了，所以將來部署的時候，不再需要這個檔案，因此我們可以到 angular.json 這個檔案，把我們之前加入的這一段路徑 src/drama-blog.html 移除，這樣，之後再執行 ng build 時，drama-blog.html 就不會再出現於 dist/angular-demo 資料夾中了。

以上，就是關於 Angular 應用程式部署的過程。

目前參考的課程內容，有提到 ng build 及 ng build --prod 在輸出檔案間，檔案大小有差異。而依據 Angular 官方文件的描述，目前使用 ng build，預設情況下會建立 "production" 配置，也就是在不更改預設值的狀況下，現在使用 ng build 就會得到先前版本中 ng build --prod 的結果。如果有需求的話，仍然可以使用 ng build--configuration development 來得到 development 配置的結果，而檔案大小就會有明顯的差異。

這邊額外補充一點，我在使用 ng build 建置專案的過程中，出現如下的警告字眼：

Your global Angular CLI version (12.2.3) is greater than your local version (12.1.4). The local Angular CLI version is used.

原因是我會在兩台不同的電腦操作，所以造成了 Angular CLI 版本上的些微差異，雖然，目前版本不同步，不會對 ng build 造成影響，但如果你覺得每次都有警告訊息很煩，我們可以試著來處理掉。

把上面這段警告訊息，拿去 Google，可以在 stack overflow 找到解法，這邊只要使用指令 npm install --save-dev @angular/cli@latest來升級本地端的 Angular CLI 版本，再一次 ng build 之後，就可以發現警告提示消失了。